<template>
  <div class="login">
    <div class="login_header">
      <img src="http://erabbit.itheima.net/img/logo.0940ebb5.png" alt="">
      <h3>欢迎登录</h3>
      <p @click="toHome">进入网站首页<span>>></span></p>
    </div>
    <div class="login_section">
      <div class="container">
        <el-card class="box-card wrapper">
          <div class="nav">
            <span>账户登录</span>
            <span>扫码登录</span>
          </div>
          <div class="box">
            <p class="email"><span class="iconfont icon-xinxi"></span>使用短息登录</p>
            <div class="input">
              <span class="iconfont icon-icon-user"></span>
              <input type="text" v-model="username">
              <p class="hint" v-show="userInfo"><i class="iconfont icon-jinggao"></i> 该用户不存在</p>
            </div>
            <div class="input">
              <span class="iconfont icon-suoding_huaban"></span>
              <input type="password" v-model="password" @blur="onBlurPass">
              <p class="hint" v-show="userPass"><i class="iconfont icon-jinggao"></i> 密码6-24个字符</p>
            </div>

            <div class="check">
              <input type="checkbox" v-model="checked">
              <span>我已同意《隐私条款》和《服务条款》</span>
              <p class="hint" v-show="!checked"><span class="iconfont icon-jinggao"></span> 请勾选登录协议</p>
            </div>

            <el-button type="info" @click="loginFn">登录</el-button>

            <div class="bottom_tab">
              <img src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png" alt="">
              <p><span>忘记密码</span><span>免费注册</span></p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <footer>
      <div class="container">
        <p>
          <span>关于我们</span>
          <span>帮助中心</span>
          <span>售后服务</span>
          <span>配送与验收</span>
          <span>商务合作</span>
          <span>搜索推荐</span>
          <span>友情链接</span>
        </p>
        <p>
          CopyRight © 小兔鲜儿
        </p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "loginView",
  data() {
    return {
      username:"",
      password:"",
      checked: true,
      userInfo: false,
      userPass: false,
    }
  },
  created() {
    this.$store.commit("setOnShow",false)
  },
  destroyed() {
    this.$store.commit("setOnShow",true)
  },
  methods: {
    onBlurPass(e) {
      const str = e.srcElement._value;
      const reg = /[a-zA-Z0-9]{6,24}/;
      if(reg.test(str)) {
        this.userPass = false
      }else {
        this.userPass = true
      }
    },
    async loginFn() {
      if(this.checked && this.username && this.password) {
        let obj={
          account:this.username,
          password:this.password,
        }
        this.$http.postLogin(obj)
        .then(res => {
          if(res.data.msg === "操作成功") {
            this.$store.commit('setToken',res.data.result.token)
            this.$message('登陆成功');
            this.$router.push("/")
            this.$store.commit("setUserInfo",true);
          }
        })
        .catch(config => {
          console.log(config);
          if(config.response.data.message === "用户不存在") {
            this.$message('用户不存在');
            this.userInfo = true;
            
          }
        })
      }
    },
    toHome() {
      this.$router.push("/")
      this.$store.commit("setUserInfo",false);
    }
  }
}
</script>

<style scoped lang="scss">
  @font-face {
    font-family: "iconfont"; /* Project id 3702426 */
    src: url('//at.alicdn.com/t/c/font_3702426_t50rhhfrnl.woff2?t=1666859689172') format('woff2'),
        url('//at.alicdn.com/t/c/font_3702426_t50rhhfrnl.woff?t=1666859689172') format('woff'),
        url('//at.alicdn.com/t/c/font_3702426_t50rhhfrnl.ttf?t=1666859689172') format('truetype');
  }

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icon-jinggao:before {
    content: "\e658";
  }

  .icon-xinxi:before {
    content: "\e64e";
  }

  .icon-icon-user:before {
    content: "\e677";
  }

  .icon-suoding_huaban:before {
    content: "\e626";
  }


  .login {
    width: 100%;
    height: 24.3vh;
    background-color: #fff;
    .login_header {
      width: 1240px;
      height: 133px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      img {
        width: 200px;
        height: 80px;
        margin-top: 20px;
      }
      h3 {
        flex: 1;
        text-align: left;
        font-weight: 400;
        font-size:24px;
        margin-top: 65px;
        margin-left: 20px;
        color: #666;
      }
      p {
        font-size: 16px;
        color: #000;
        text-decoration: none;
        height: 30px;
        margin-top: 70px;
        cursor: pointer;
        span {
          color: #27BA9B;
        }
      }
    }
    .login_section {
      width: 100%;
      height: 488px;
      background-image: url("http://erabbit.itheima.net/img/login-bg.696efec3.png");
      background-size: 100% 100%;
      position: relative;
      .container {
        height: 488px;
        position: relative;
      }
      .wrapper {
        width: 380px;
        height: 400px;
        background: #fff;
        position: absolute;
        right: 140px;
        top: 54px;
        .nav {
          height: 55px;
          border-bottom: 1px solid #f5f5f5;
          display: flex;
          justify-content: space-between;
          padding: 0 40px;
          text-align: right;
          align-items: center;
          span {
            font-size: 18px;
            cursor: pointer;
          }
          span.active {
            color: #27ba9b;
            font-weight: 700;
          }
        }
        .box {
          padding: 0 40px;
          .email {
           padding: 15px 0;
           text-align: right;
           color: #27ba9b;
           font-size: 14px;
           cursor: pointer;
           span {
            display: inline-block;
            text-align: center;
            margin-right: 5px;
            position: relative;
            top: 2px;
           }
         }
          .input {
            margin: 0 auto;
            box-sizing: border-box;
            width: 300px;
            height: 36px;
            margin-bottom: 28px;
            position: relative;
            span {
              width: 34px;
              height: 34px;
              background: #cfcdcd;
              position: absolute;
              left: 0;
              top: 0;
              color: #fff;
              text-align: center;
              line-height: 34px;
              font-size: 18px;
            }
            input {         
              width: 300px;   
              height: 34px;
              box-sizing: border-box;
              border: 1px solid #cfcdcd;
              padding-left: 44px;
              outline: none;
              font-size: 14px;
              line-height: 36px;
            }
          }
          .check {
            text-align: left;
            font-size: 14px;
            margin-bottom: 34px;
            padding-top: 5px;
            position: relative;
            input {
              width: 14px;
              height: 14px;
              margin-right: 2px;
              position: relative;
              top: -1px;
            }
          }
          .hint {
            position: absolute;
            bottom: -24px;
            left: 0;
            font-size: 13px;
            .icon-jinggao {
              font-size: 12px;
              color: red;
            }
          }
          .bottom_tab {
            padding: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            img {
              cursor: pointer;
            }
            p {
              color: #999;
              font-size: 14px;
              span {
                margin-left: 10px;
                cursor: pointer;
              }
            }
          }
        }
        .clearfix {
          display: flex;
          justify-content: space-around;
          a {
            font-size: 17px;
            color: #000;
            text-decoration: none;
          }
        }
        ::v-deep .el-card__body {
          padding: 0;
        }
        .el-card__body {
          padding: 0;
          .el-input {
            margin: 10px 0;
          }
          .el-checkbox  {
            margin: 10px 60px 10px 0;
          }
          .error {
            text-align:left;
            color: red;
            margin: 0 0 10px 5px;
            .el-icon-warning {
              margin-right: 10px;
            }
          }
          .el-button {
            width: 100%;
            background: #27ba9b;
          }
        }

      }
    }
    footer {
      padding: 30px 0 50px;
      background-color: #fff;
      height: 100%;
      div {
        p {
          text-align: center;
          color: #999;
          padding-top: 20px;
          font-size: 14px;
          span {
            line-height: 1;
            padding: 0 10px;
            color: #999;
            display: inline-block;
            border-left: 1px solid #ccc;
            cursor: pointer;
          }
          :first-child {
            border: none;
          }
        }
      }
    }
  }

</style>